<!--商品购买页input加减模块组件-->
<template>
    <div class="bex">
        <input type="button" value="-" @click="delCount">
        <input type="button" value="" class="txt" v-model="texVal">
        <input type="button" value="+" @click="addCount">
    </div>
</template>

<script>
    export default {
        props: ["number"],
        data(){
            return {
                texVal: ""
            }
        },
        methods: {
            addCount(){ //用来实现商品数量的增加功能
                this.textVal = 0;
                this.texVal ++;
                this.sendMsg();//在加的同时进行数据传递
            },
            delCount(){ //用来实现商品数量的减少功能  
                if(this.texVal >= 1){
                    this.texVal --;
                    this.sendMsg();//在减的同时进行数据的传递
                };
            },
            sendMsg(){ //子组件向父组件传参
                this.$emit("sendCount",this.texVal);//通过sendMsg方法向父组件进行传参操作。
            }
        }
    }
</script>

<style scoped>
    .bex {
        display: inline-block;
    }
    .bex input {
        height: 30px;
        font-weight: 700;
    }
    .txt {
        width: 20px;
        margin: 0;
        width: 50px;
    }
</style>


